<script setup lang="ts">
import type { CategoryItem } from '@/types/home'

defineProps<{
  list: CategoryItem[]
}>()

const onNavigate = (id: string) => {
  // 存储id，因为switchTab不能携带query
  uni.setStorageSync('categoryId', id)
  // 跳转页面
  uni.switchTab({ url: `/pages/category/category` })
}
</script>

<template>
  <view class="category">
    <view
      class="category-item"
      hover-class="none"
      v-for="item in list"
      :key="item.id"
      @tap="onNavigate(item.id)"
    >
      <image class="icon" :src="item.icon"></image>
      <text class="text">{{ item.name }}</text>
    </view>
  </view>
</template>

<style lang="scss">
@import './styles/CategoryPanel.scss';
</style>
